<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>插入</title>
		<style type="text/css">
		/*没有放入.box的时候是隐藏的*/
		.row{
			display:none;
		}
		/*放入.box后变成了显示*/
		.box .row{
			display: block;
		}
	</style>
</head>
<body>
<a href="index.html">首页</a>
	<div class="box">
		<input type="" name="" class="clone">
		<button class="add">+</button>
	</div>
	
	<div class="row">
		<input type="" name="">
		<button class="remove">-</button>
	</div>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
	// 添加的事件
		$('.add').click(function(){
			var row = $('.row').first().clone();//这个DIV数组的第一个子元素克隆自己
			console.log($('.row').first());//这个DIV数组的第一个子元素
			$(this).before(row);//把克隆的元素放到.add这个数组的前面
		})
		// 去除的事件
		// 对于后面添加的元素，需要使用on事件
		// 委托事件 将子元素的事件委托给父元素
		// $('父元素').on('事件名称','子元素', function(){})
		$('.box').on('click','.remove',function(){
			console.log($(this).index('.remove')); // 得到当前remove在remove数组元素里面的下标
			$(this).parent().remove();
		})
	</script>
</body>
</html>